<template>
  <view>
    <u-navbar title="商户申请" auto-back placeholder></u-navbar>
    <view class="px-12">
      <view class="card">
        <view class="color-black">
          <view class="text-16 py-12">请填写商户信息</view>
          <view class="text-14 py-12">商户名称</view>
          <u-input
            placeholder="请填写"
            v-model="formData.merchantName"
          ></u-input>
		  <view class="text-14 py-12">logo</view>
		  <view>
		    <UploadFile :fileUrl.sync="formData.logoUrl"></UploadFile>
		  </view>
          <view class="text-14 py-12">地址</view>
          <u-input
            placeholder="请填写"
            v-model="formData.merchantAddress"
          ></u-input>
          <view class="text-14 py-12">经营类型</view>
          <view @click="show = true">
            <u-input placeholder="请选择" v-model="businessType" readonly></u-input>
          </view>
          <view class="text-14 py-12">商户介绍</view>
		  <view>
		    <u--textarea
		      placeholder="请输入商户介绍"
		      v-model="formData.description"
		  			  >
		    </u--textarea>
		  </view>
          <view class="text-14 py-12">营业执照照片</view>
          <view class="mb-80">
            <UploadFile
              :fileUrl.sync="formData.businessLicenceImg"
            ></UploadFile>
          </view>
        </view>
      </view>
    </view>
    <view class="page-foot px-12 pt-6">
      <u-button type="primary" shape="circle" @click="applyForLeader"
        >申请成为商户</u-button
      >
    </view>
    <u-picker
      :show="show"
      @close="close"
      closeOnClickOverlay
      @cancel="close"
      :columns="columns"
      @confirm="confirmType"
      confirmColor="#5db292"
    ></u-picker>
  </view>
</template>

<script>
import UploadFile from "@/components/uploadFile/index.vue";
import { fetchSysAgentOpenSysAgent } from "@/services/api";
import { mapGetters } from "vuex";
const typeNameEnum = {
  餐饮: 1,
  服饰: 2,
  生鲜: 3,
};
export default {
  components: {
    UploadFile,
  },
  data() {
    return {
      show: false,
      //代理商类型 1、餐饮 2、服饰 , 3 ,生鲜
      columns: [["餐饮", "服饰", "生鲜"]],
      formData: {
        agentName: "",
        logoUrl: "",
        agentAddress: "",
        memberFlag: 1,
      },
      typeName: "",
    };
  },
  methods: {
    //申请注册团长
    async applyForLeader() {
      const { username, avatar, phone } = this.customerInfo;
      const { data, error } = await fetchSysAgentOpenSysAgent({
        ...this.formData,
        username,
        avatar,
        phone,
      });
      if (!error) {
        uni.$u.toast("申请成功");
        setTimeout(() => {
          this.$Router.back(2);
        });
      }
    },
    close() {
      this.show = false;
    },
    confirmType(val) {
      console.log("选择类型确定", val.value);
      this.typeName = val.value[0];
      this.formData.businessType = typeNameEnum[this.typeName];
      this.close();
    },
  },
  computed: {
    ...mapGetters("user", {
      customerInfo: "getCustomerInfo",
    }),
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.card {
  margin-top: 24rpx;
  width: 702rpx;
  box-sizing: border-box;
  padding: 24rpx;
  background: #fff;
  box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.05);
  border-radius: 8rpx;
}
.page-foot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 34px;
  background: #fff;
}
</style>
